<template>
    <select v-model="value" class="11" v-bind:name="name" v-on:change="onchange">
        <option selected value disabled v-if="!!placeholder">{{ placeholder }}</option>
        <option v-for="option in options" v-bind:value="option.value">
        {{ option.alias }}
        </option>
    </select>
</template>

<script>
    // todo 错误处理还需要斟酌
    // todo 有个问题，后期渲染数据的话，那个value会覆盖掉
    import Vue from 'vue';
    import co from 'co';
    import extend from 'extend';
    import util from 'util';
    export default Vue.extend({
        props:{
            // 数据源
            dataSource:{
                type: String,
                required: true
            },
            // 占位符
            placeholder:{
                type: String,
                default: ''
            },
            // name
            name: {
                type: String,
                default: ''
            },
            // 数据源参数
            params: {
                type: Object,
                default: function(){
                    return {};
                }
            },
            value:{
                type: String,
                default: ''
            }
        },
        data:function(){
            return {
                model:[]
            }
        },
        computed: {
            options: function(){
                return this._toOptions(this.model);
            }
        },
        created: function(){
            // 首次同步模型数据
            co(this._get);
            // 初始化监听
            this._initWatch();

            setTimeout(()=>{
                this.onchange();
            },1000);

            console.log(this.value);
        },
        methods: {
            /**
             * 注册监听
             * 一般用在数据模型同步的时候
             */
            _initWatch: function(){
                // 在 dataSource 变化的时候更新模型
                this.$watch('dataSource', function(value){
                    co(this._get);
                });

                // 在 params 变化的时候更新模型
                this.$watch('params', function(value){
                    co(this._get);
                });

            },
            /**
             * 中间件 将模型处理为选项数据
             * @param  {Object} upstream 待处理的上游数据
             * @return {Object}          处理完成之后的下游数据
             */
            _toOptions: function(upstream){
                return upstream;
            },
            /**
             * 同步模型 获取服务器数据
             */
            _get: function* (){
                var value = this.value;
                // 没有定义 dataSource 的时候返回 []
                if(!this.dataSource){
                    this.model = [];
                }

                // 当 dataSource 为string的时候，它作为一个数据接口的url,并且获取 url 中的数据
                if(util.isString(this.dataSource)){

                    var response = yield this.$http.get(this.dataSource, this.params);
                    if(response.data.status === 0){
                        this.model = response.data.data;
                    }else{
                        this.model = [];
                    }
                }

                // 当 dataSource 为 Array 类型的时候，它作为数据本身直接返回
                if(util.isArray(this.dataSource)){
                    this.model = this.dataSource;
                }
                this.value = value;
            },
            onchange: function(){
                console.log(this.value, typeof this.value);
            }
        }
    });
</script>
